<template>
	<view class="devicedetail">
		<view class="header">
			<view class="contentSw_inc">
				<contentSw :swlist="conSwlist" @conswitch="conswitch"></contentSw>
			</view>
			<view class="con_search">
				<picker mode="date" fields="month"
				 :start="pickerData.start" 
				 :end="pickerData.end" 
				 @change="pickerSel($event)">
					<view>
						<text>{{pickerData.selectData==''?'所有':pickerData.selectData}}</text>
						<image src="../../static/img/ic_pulldown.png"></image>
					</view>
				</picker>
				<view v-show="currentIndex==0">关联:{{devicebind.devicebindCount}}</view>
				<view v-show="currentIndex==1">绑定:{{device.deviceCount}}</view>
			</view>
		</view>
		
		<!-- <view class="con_search">
			<picker mode="date" fields="month"
			 :start="pickerData.start" 
			 :end="pickerData.end" 
			 @change="pickerSel($event)">
				<view>
					<text>{{pickerData.selectData==''?'所有:':pickerData.selectData}}</text>
					<image src="../../static/img/ic_pulldown.png"></image>
				</view>
			</picker>
			<view v-show="currentIndex==0">关联:{{devicebind.devicebindCount}}</view>
			<view v-show="currentIndex==1">绑定:{{device.deviceCount}}</view>
		</view> -->
		<view class="content">
			<noData v-if="dealList.length==0"></noData>
			<scroll-view class="conList_scroll" v-else scroll-y="true" @scrolltolower="getlist">
				<view class="con_list" v-for="(item,index) in dealList" @click="navDevice(item.imei)"
				 v-show="currentIndex==0">
					<view class="con_item">
						<view class="con_title">设备ID</view>
						<view class="con_text">{{item.imei}}</view>
					</view>
					<view class="con_item">
						<view class="con_title">关联时间</view><view class="con_text">{{item.bind_time}}</view>
					</view>
				</view>
				<view class="con_list" v-for="(item,index) in dealList" @click="navDevice(item.imei)"
				 v-show="currentIndex==1">
					<view class="con_item">
						<view class="con_title">设备ID</view>
						<view class="con_text">{{item.imei}}</view>
						<view class="con_size">{{item.meet_refund == 0?'未满足':'已满足'}}</view>
					</view>
					<view class="con_item">
						<view class="con_title">绑定时间</view>
						<view class="con_text">{{item.activate_time}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- <view class="footer">
			<button type="primary" @click="navStatistics()">统计</button>
		</view> -->
	</view>
</template>

<script>
	import contentSw from '../../components/workbench/contentSw.vue'
	import { devicebindlist,devicelist } from '../../api/index.js'
	import noData from '../../components/data/nodata.vue'
	export default {
		data() {
			return {
				pickerData:{
					start:"",
					end:"",
					selectData:""
				},
				dealList:[],
				devicebind:{
					devicebindList:[],
					devicebindCount:''
				},
				device:{
					deviceList:[],
					deviceCount:''
				},
				currentIndex:0,
				conSwlist:[{name:'设备关联'},{name:'设备绑定'}],
				isLoad:false,
				isAll:false,
				page:1,
				limit:20,
				id:'',
			}
		},
		onLoad:function(data){
			this.id = data.id;
			this.getPickerDate()
			uni.setNavigationBarTitle({
			    title: data.name
			});
			
			this.getlist(true);
		},
		methods: {
			conswitch:function(data){
				console.log(data);
				this.currentIndex = data.index;
				this.isLoad = false;
				this.isAll = false;
				this.page = 1;
				this.getlist(true);
			},
			//设置日期区间(取最近3年)
			getPickerDate:function(){
				let date = new Date();
				let month = date.getMonth()+1;
				let year = date.getFullYear();
				month<10?month= "0"+month:month;
				this.pickerData.start = (year-3)+"-"+month+"-01";
				this.pickerData.end = year+"-"+month+"-01";
			},
			//加载列表数据逻辑
			getlist:function(isSw){
				let that = this;
				if(that.isLoad || that.isAll){ //假如之前的请求未完成或者列表数据已经全部加载完毕，则返回空
					console.log("请求未完成或者列表数据已经全部加载完毕")
					return ;
				}
				that.isLoad = true;
				if(that.currentIndex == 0){
					that.getDevicebindlist(isSw);
				}else if(that.currentIndex == 1){
					that.getDevicelist(isSw);
				}
			},
			//列表数据统一处理
			deallistFun:function(data){
				function datedeal(date){
					if(!date){
						return "";
					}
					date = date+"000";
					let date2 = new Date(parseInt(date));
					return date2.getFullYear()+"-"+(date2.getMonth()+1)+"-"+date2.getDay()+"  "+date2.getHours()+":"+date2.getMinutes()+":"+date2.getSeconds();
				}
				let list = data.map((item,index,arr)=>{
					return {
						imei:item.imei,
						bind_time:item.bind_time, //关联时间
						activate_time:datedeal(item.activate_time), //绑定时间
						
					};
				});
				return list;
			},
			//获取设备关联列表
			getDevicebindlist:function(isSw){
				let that = this;
				devicebindlist({
					id:that.id,
					page:that.page,
					limit:that.limit,
					time:that.pickerData.selectData
				}).then((res) => {
					if(res.code==0){
						that.devicebind.devicebindCount = res.data.count;
						let list = that.deallistFun(res.data.list_data);
						// console.log(list)
						if(isSw === true){//判断是否重新加载数据
							that.dealList = list;
						}else{
							that.dealList = that.dealList.concat(list);
						}
						
						that.page += 1;
						that.isLoad = false;
						if(res.data.list_data.length < that.limit){
							that.isAll = true;
						}
					}else{
						that.isLoad = false;
						that.isAll = false;
					}
				});
			},
			//获取设备绑定列表
			getDevicelist:function(isSw){
				let that = this;
				devicelist({
					id:that.id,
					page:that.page,
					limit:that.limit,
					time:that.pickerData.selectData
				}).then((res) => {
					if(res.code == 0){
						console.log(res);
						that.device.deviceCount = res.data.count;
						let list = that.deallistFun(res.data.list_data);
						if(isSw === true){//判断是否重新加载数据
							that.dealList = list;
						}else{
							that.dealList = that.dealList.concat(list);
						}
						
						that.page += 1;
						that.isLoad = false;
						if(res.data.list_data.length < that.limit){
							that.isAll = true;
						}
					}else{
						console.log(res.msg)
					}
				});
			},
			//日期选择
			pickerSel:function(e){
				let dateArr = e.target.value.split("-");
				this.pickerData.selectData = dateArr[0]+"-"+dateArr[1];
				this.isLoad = false;
				this.isAll = false;
				this.page = 1;
				this.getlist(true);
			},
			//列表跳转
			navDevice:function(imei){
				let url = "";
				if(this.currentIndex == 0){
					url = '../devicerelation/devicerelation?imei='+imei;	
				}else if(this.currentIndex == 1){
					url = '../devicebind/devicebind?imei='+imei;
				}
				uni.navigateTo({
					url: url
				});
			},
			//跳转到统计页面
			navStatistics:function(){
				uni.navigateTo({
					url:"../deviceStatistics/deviceStatistics"
				})
			}
		},
		components:{
			contentSw,
			noData
		}
	}
</script>

<style lang="scss" scoped>
	.devicedetail{
		height: 100%;
		background-color: #F5F5F5;
		font-size: $uni-font-size-base;
		.header{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 200rpx;
			z-index: 10;
			.contentSw_inc{
				background-color: #FFFFFF;
				border-top: 1rpx $uni-border-color-e5 solid;
			}
			.con_search{
				color: #666666;
				display: flex;
				justify-content: space-between;
				padding: 30rpx;
				image{
					width: 20rpx;
					height: 20rpx;
				}
			}
		}
		
		.content{
			height: 100%;
			position: relative;
			padding-top: 200rpx;
			padding-bottom: 130rpx;
			.conList_scroll{
				height: 100%;
				.con_list{
					background-color: #FFFFFF;
					border-radius: $uni-border-radius-base;
					margin: 0 30rpx 30rpx 30rpx;
					padding: 30rpx 30rpx 0 30rpx;
					.con_item{
						display: flex;
						padding-bottom: 30rpx;
						position: relative;
						.con_title{
							color: #999999;
							width: 25%;
						}
						.con_size{
							position: absolute;
							font-size: $uni-font-size-sm;
							padding: 5rpx 10rpx;
							right: 0;
							color: #007AFF;
							&:before{
								content: '';
								position: absolute;
								border-radius: $uni-border-radius-sm;
								width: 92rpx;
								height: 40rpx;
								background-color: #007AFF;
								opacity:0.2;
								right: 0;
								top: 0;
							}
						}
					}
				}
			}
		}
		.footer{
			padding: 15rpx 30rpx 30rpx 30rpx;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			background-color: #FFFFFF;
			z-index: 10;
			button{
				font-size: $uni-font-size-lg;
			}
		}
	}
</style>
